<template>
  <div class="login_page">
    <Navigation>
    </Navigation>
    <div class="login_content_wrapper">
      <div class="login_background_img">
      </div>
      <LoginForm class="login_form"></LoginForm>
    </div>
  </div>

</template>

<script>

import Navigation from "@/components/navigation/Navigation";
import LoginForm from "@/components/login/LoginForm";

export default {
  name: "LoginPage",
  components: {LoginForm, Navigation}
}
</script>

<style scoped>
.login_content_wrapper {
  margin-top: 5vh;
  width: 100vw;
  height: 80vh;
  background-color: white;
}

.login_background_img {
  position: relative;
  width: 50vw;
  height: 70%;
  left: 10vw;
  top: 10vh;
  background-image: url("https://cdn.asueeer.com/images/202111/2212655130_1636607047_60.jpeg");
  background-size: 100% 100%;
}

.login_form {
  position: absolute;
  text-align: center;
  width: 25vw;
  height: 50vh;
  /*justify-content:center;*/
  /*line-height: 25vh;*/
  left: 60vw;
  top: 35vh;
}

.login_page {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
}


</style>